<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天猫移动端布局</title>

    <link rel="stylesheet" href="css/tmphone.css">
</head>
<body>

<!--顶部-->
<div class="ding">
    <div class="ding-top">
        <div class="ding-top-left"><a href="" class="ding-top-a"><img src="imgs/tmphoneding1.webp" alt="" ></a></div>
        <img src="imgs/tmphoneding2.webp" alt="" class="logo">
        <div class="ding-top-right"><a href="">登录</a></div>
    </div>
    <div class="ding-bottom">
        <div class="sousuo">
            <img src="imgs/tmphoneding3.webp" alt="">
            <span>搜索商品、品牌</span>

        </div>
    </div>
</div>

<!--列表-->
<div class="list">
    <div class="list-opt">
        <a href="">
            <img src="imgs/tmphonelist1.webp" alt="">
            <span>苏宁易购</span>
        </a>
    </div>
    <div class="list-opt">
        <a href="">
            <img src="imgs/tmphonelist1.webp" alt="">
            <span>苏宁易购</span>
        </a>
    </div>
    <div class="list-opt">
        <a href="">
            <img src="imgs/tmphonelist1.webp" alt="">
            <span>苏宁易购</span>
        </a>
    </div>
    <div class="list-opt">
        <a href="">
            <img src="imgs/tmphonelist1.webp" alt="">
            <span>苏宁易购</span>
        </a>
    </div>
    <div class="list-opt">
        <a href="">
            <img src="imgs/tmphonelist1.webp" alt="">
            <span>苏宁易购</span>
        </a>
    </div>

</div>

<!--轮播-->
<div class="lunbo">
    <div class="dinner1 din">
        <img src="imgs/tmphonelunbo1.webp" alt="">
    </div>
    <div class="dinner2 din">
        <img src="imgs/tmphonelunbo2.webp" alt="">
    </div>
    <div class="dinner3 din">
        <img src="imgs/tmphonelunbo3.webp" alt="">
    </div>
    <div class="dinner4 din">
        <img src="imgs/tmphonelunbo4.webp" alt="">
    </div>
    <div class="dinner5 din">
        <img src="imgs/tmphonelunbo5.webp" alt="">
    </div>

    <div class="btns">
        <div class="btn btn1" ></div>
        <div class="btn btn2 "></div>
        <div class="btn btn3 "></div>
        <div class="btn btn4 "></div>
        <div class="btn btn5 "></div>

    </div>


</div>

<!--横幅-->

<div class="hengfu">
    <a href="">
        <img src="imgs/tmphonezhongjian.webp" alt="">
    </a>
</div>


<!--四宫格-->
<div class="sigongge">
    <div class="opt">
        <a href=""><span>天猫好物</span></a>
        <div class="opt-bottom">
            <div class="op-bottom-opt">   </div>
            <div class="op-bottom-opt">   </div>
            <div class="opt-text">
                <span>为你精选</span>
            </div>
        </div>
    </div>
    <div class="opt"><a href=""><span>天猫好物</span></a>
        <div class="opt-bottom">
            <div class="op-bottom-opt">   </div>
            <div class="op-bottom-opt">   </div>
            <div class="opt-text">
                <span>为你精选</span>
            </div>
        </div></div>
    <div class="opt"><a href=""><span>天猫好物</span></a>
        <div class="opt-bottom">
            <div class="op-bottom-opt">   </div>
            <div class="op-bottom-opt">   </div>
            <div class="opt-text">
                <span>为你精选</span>
            </div>
        </div></div>
    <div class="opt"><a href=""><span>天猫好物</span></a>
        <div class="opt-bottom">
            <div class="op-bottom-opt">   </div>
            <div class="op-bottom-opt">   </div>
            <div class="opt-text">
                <span>为你精选</span>
            </div>
        </div></div>

</div>


<!--天猫榜单-->
<div class="tmbangdan">
    <div class="tmbangdan-title">
        <span>天猫榜单</span>
    </div>
    <div class="qushi">
        <div class="qushi-left">
            <div class="zhezhao"></div>
            <img src="imgs/qushibang.webp" alt="" class="qushibang">
            <div class="qushi-left-top">
                <img src="imgs/qushi.webp" alt="">
            </div>
            <div class="qushi-left-mid">时尚简约领针榜</div>
            <span>人气上升679%</span>
        </div>
        <div class="qushi-mid">
            <div class="zhezhao"></div>
            <img src="imgs/qushibang.webp" alt="" class="qushibang">
            <div class="qushi-left-top">
                <img src="imgs/qushi.webp" alt="">
            </div>
            <div class="qushi-left-mid">时尚简约领针榜</div>
            <span>人气上升679%</span>
        </div>
        <div class="qushi-right">
            <div class="zhezhao"></div>
            <img src="imgs/qushibang.webp" alt="" class="qushibang">
            <div class="qushi-left-top">
                <img src="imgs/qushi.webp" alt="">
            </div>
            <div class="qushi-left-mid">时尚简约领针榜</div>
            <span>人气上升679%</span>
        </div>
    </div>
    <div class="renqi">
        <div class="renqi-left">
            <div class="renqi-left-text">
                <div>人气榜</div>
                <span>质感居家睡裙榜</span>
                <span class="two">月销152件</span>

            </div>
        </div>
        <div class="renqi-right">
            <div class="sdinner1 sdin">
            <div>
                <img src="imgs/one.webp" alt="" class="one">
                <img src="imgs/renqiright1.webp" alt="">
            </div>
            <div>
                <img src="imgs/two.webp" alt="" class="one">
                <img src="imgs/renqiright2.webp" alt="">
            </div>
            <div>
                <img src="imgs/three.webp" alt="" class="one">
                <img src="imgs/renqiright3.webp" alt="">
            </div>
        </div>
            <div class="sdinner2 sdin">
                <div>
                    <img src="imgs/four.webp" alt="" class="one">
                    <img src="imgs/renqiright4.webp" alt="">
                </div>
                <div>
                    <img src="imgs/five.webp" alt="" class="one">
                    <img src="imgs/renqiright5.webp" alt="">
                </div>
                <div>
                    <img src="imgs/six.webp" alt="" class="one">
                    <img src="imgs/renqiright6.webp" alt="">
                </div>
            </div>
        </div>

    </div>
    <a href="" class="renqia">
        <div class="renqia-left">
            <span class="left-one">人气榜</span>
            <div class="left-two"></div>
            <span class="left-three">高街绣花裙连衣裙</span>
            <span class="left-four">月销105件</span>
        </div>
        <div class="renqia-right"></div>
    </a>
    <a href="" class="renqia">
        <div class="renqia-left">
            <span class="left-one">人气榜</span>
            <div class="left-two"></div>
            <span class="left-three">高街绣花裙连衣裙</span>
            <span class="left-four">月销105件</span>
        </div>
        <div class="renqia-right"></div>
    </a>
    <a href="" class="renqia">
        <div class="renqia-left">
            <span class="left-one">人气榜</span>
            <div class="left-two"></div>
            <span class="left-three">高街绣花裙连衣裙</span>
            <span class="left-four">月销105件</span>
        </div>
        <div class="renqia-right"></div>
    </a>
    <a href="" class="renqia">
        <div class="renqia-left">
        <span class="left-one">人气榜</span>
        <div class="left-two"></div>
        <span class="left-three">高街绣花裙连衣裙</span>
        <span class="left-four">月销105件</span>
    </div>
        <div class="renqia-right"></div>
    </a>

</div>

<!--猜你喜欢-->
<div class="xihuan">
    <span>猜你喜欢</span>
</div>

<div class="body">
    <div class="xihuan-body-opt">
        <div class="xihuan-body-opt-ll"><div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div></div>

        <div class="xihuan-body-opt-left right"></div>
    </div>
    <div class="xihuan-body-opt">
        <div class="xihuan-body-opt-left right"></div>
        <div class="xihuan-body-opt-ll"><div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div></div>

    </div>
    <div class="xihuan-body-opt2">
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>

    </div>
    <div class="xihuan-body-opt2">
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>

    </div>
    <div class="xihuan-body-opt2">
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>

    </div>
    <div class="xihuan-body-opt2">
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>

    </div>
    <div class="xihuan-body-opt2">
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>

    </div>
    <div class="xihuan-body-opt2">
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>

    </div>
    <div class="xihuan-body-opt2">
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>

    </div>
    <div class="xihuan-body-opt2">
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>
        <div class="xihuan-body-opt-left">
            <div class="xihuan-icon"><img src="imgs/xihuan-brand.webp" alt=""></div>
            <div class="xihuan-brand">
                <img src="imgs/xihuan-brand3.png" alt="">
                <span>REW..</span>

            </div>
            <div class="xihuan-text">
                <span >余文乐MADNESS同款1970s三代3.0联名鸳鸯翻毛休闲鞋蓝色帆布鞋</span>
            </div>
            <div class="youhuijuan">
                20元券
            </div>
            <div class="xihuan-bottom">
                <span class="qian">￥198</span>
                <div class="xiangsi"><span>看相似</span></div>

            </div>

        </div>

    </div>

</div>



</body>

<script>
    var banner = document.querySelectorAll(".din");
    var btns = document.querySelectorAll(".btn");
    var num=0;
    btns[0].style.background="#fff"
    num++;

    setInterval(function () {

        if (num == 5) {
            num = 0;
        }
        console.log(num);
        for (var i = 0; i < banner.length; i++) {
            banner[i].style.display = "none"
            btns[i].style.background="#000"
        }

        banner[num].style.display = "block";
        btns[num].style.background="#fff"
        num++;
    },3000)

</script>


<script>
    var ban = document.querySelectorAll(".sdin");
    console.log(ban);
    var sum=0;

    setInterval(function () {
        if (sum == 2) {
            sum = 0;
        }

        for (var i = 0; i < ban.length; i++) {
            ban[i].style.display = "none"
        }
        ban[sum].style.display = "block";
        sum++;
    },3000)

</script>
</html>